<template>
  <div class="jobsItem-container">
    <v-expansion-panels
      v-model="selectedPanel"
      mandatory
      accordion
      flat
      focusable
      class="panels"
    >
      <v-expansion-panel
        v-for="(item, i) in syncedJobList"
        :key="i"
        :value="item"
        class="panel"
        accesskey
      >
        <v-expansion-panel-header hide-actions class="panel-header">
          <v-list subheader class="panel-subheader">
            <v-list-item>
              <v-list-item-action
                v-if="propShowSelect"
                @click.stop
                class="checkbox-action mr-2"
              >
                <v-checkbox
                  v-model="checkedValue"
                  multiple
                  :value="item"
                ></v-checkbox>
              </v-list-item-action>
              <v-list-item-avatar height="100%">
                <v-img
                  class="avatar-img"
                  src="https://cdn.vuetifyjs.com/images/lists/2.jpg"
                ></v-img>
                <div v-if="propShowName" class="name">{{ item.assignTo }}</div>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title>
                  {{ item.jobCate }} - {{ item.number }}
                </v-list-item-title>

                <v-list-item-subtitle>{{ item.jobName }}</v-list-item-subtitle>
              </v-list-item-content>
              <slot name="content-middle" :item="item"></slot>
              <v-list-item-action>
                <v-list-item-subtitle>
                  <span>{{ item.startDate }}</span> -
                  <span>{{ item.endDate }}</span>
                </v-list-item-subtitle>
                <div class="actions-group">
                  <div class="actions-group-icon">
                    <v-icon
                      v-if="
                        item.attachmentList && item.attachmentList.length > 0
                      "
                      small
                      color="grey"
                    >
                      mdi-file
                    </v-icon>
                    <v-chip
                      class="mx-1 mr-3"
                      :color="getStatusColor(item.status)"
                      label
                      dark
                      x-small
                    >
                      {{ item.status }}
                    </v-chip>
                    <div class="status">
                      <v-icon
                        x-small
                        class="arrow-icon"
                        :color="getPriorityColor(item.priority)"
                      >
                        {{
                          item.priority === "Low"
                            ? "mdi-arrow-down"
                            : "mdi-arrow-up"
                        }}
                      </v-icon>
                      <v-list-item-action-text>
                        {{ item.priority }}
                      </v-list-item-action-text>
                    </div>
                  </div>
                  <v-list-item-action-text class="actions-group-text"
                    ><b>{{ item.tasksSum }}</b
                    >tasks</v-list-item-action-text
                  >
                </div>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </v-expansion-panel-header>
        <v-expansion-panel-content class="panel-content">
          <v-expansion-panels
            flat
            accordion
            focusable
            multiple
            v-model="subPanel"
            class="sub-panels"
          >
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                <template v-slot:default>
                  <div class="d-flex justify-space-between align-center">
                    <span> Info </span>
                    <div>
                      <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                          <v-btn
                            @click.stop="openEditJob(item)"
                            v-on="on"
                            icon
                            small
                          >
                            <v-icon small> mdi-square-edit-outline </v-icon>
                          </v-btn>
                        </template>
                        Edit Job
                      </v-tooltip>
                    </div>
                  </div>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <JobsItemInfo class="pa-2 pb-3" :jobItem="item" />
              </v-expansion-panel-content>
            </v-expansion-panel>
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                Job Symptoms
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <JobsItemSymptoms :items="item.reportProblemList" />
              </v-expansion-panel-content>
            </v-expansion-panel>
            <v-expansion-panel class="sub-panel">
              <v-expansion-panel-header class="sub-panel-header">
                <template v-slot:default>
                  <div class="d-flex justify-space-between align-center">
                    <span> Attachment </span>
                    <div>
                      <v-btn @click.stop="toggleArrangement" icon small>
                        <v-icon v-if="arrangement === 'brief'" small>
                          mdi-format-list-bulleted-square
                        </v-icon>
                        <v-icon v-else small>mdi-microsoft</v-icon>
                      </v-btn>
                      <v-btn @click.stop="showUploadDialog" icon small>
                        <v-icon small> mdi-file-upload </v-icon>
                      </v-btn>
                    </div>
                  </div>
                </template>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <JobsItemAttachment
                  class="px-2 pt-1 pb-2"
                  :arrangement="arrangement"
                  :attachmentList="item.attachmentList"
                />
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
    <Upload
      v-if="syncedSelected"
      :attachmentList="syncedSelected.attachmentList"
      :show.sync="showUpload"
    ></Upload>
    <Dialog v-model="showDialog" :title="dialogTitle" @submit="editJob">
      <template>
        <NewJob ref="newJob"></NewJob>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  PropSync,
  ModelSync,
  Watch,
} from "vue-property-decorator";
import JobsItemInfo from "@/components/Project/Jobs/JobsItemInfo.vue";
import JobsItemSymptoms from "@/components/Project/Jobs/JobsItemSymptoms.vue";
import JobsItemAttachment from "@/components/Project/Jobs/JobsItemAttachment.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import Upload from "@/components/Project/Upload/Upload.vue";
import NewJob from "@/components/Project/AddNew/NewJob/NewJob.vue";
import { IJobItem } from "@/components/Project/index";

@Component({
  components: {
    JobsItemInfo,
    JobsItemSymptoms,
    JobsItemAttachment,
    Dialog,
    NewJob,
    Upload,
  },
  props: {
    "show-name": {
      type: Boolean,
      default: true,
    },
    "show-select": {
      type: Boolean,
      default: false,
    },
  },
})
export default class JobsItem extends Vue {
  @ModelSync("checked", "input", { type: Array }) checkedValue!: IJobItem[];
  @PropSync("selected", { type: Object, default: () => ({}) })
  syncedSelected!: IJobItem | null;
  @PropSync("jobList", { type: Array, default: () => [] })
  syncedJobList!: Array<IJobItem>;

  @Watch("syncedJobList")
  onSyncedJobListChange() {
    if (this.syncedSelected) {
      const index = this.syncedJobList.findIndex(
        (item) => item.id === this.syncedSelected!.id
      );
      this.selectedPanel = index;
    } else {
      this.selectedPanel = null;
      this.syncedSelected = null;
    }
  }

  get propShowName() {
    return this.$props.showName;
  }

  get propShowSelect() {
    return this.$props.showSelect;
  }

  getPriorityColor(priority: string) {
    switch (priority) {
      case "High":
        return "#F31616";
      case "Low":
        return "#67D245";
      case "Middle":
        return "#EB9B31";
      default:
        return "#F31616";
    }
  }

  getStatusColor(status: string) {
    switch (status) {
      case "Ongoing":
        return "#EB9B31";
      case "New Job":
        return "#556282";
      case "Finished":
        return "#7FAB78";
      default:
        return "#EB9B31";
    }
  }
  // Dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // panel
  panel = null;
  // Upload
  showUpload = false;

  showUploadDialog() {
    this.showUpload = true;
  }

  // Panel
  subPanel = [0, 1, 2];

  selectedPanelValue: number | null = null;
  get selectedPanel() {
    if (this.syncedSelected) {
      return this.syncedJobList.findIndex(
        (item) => item.id === this.syncedSelected!.id
      );
    } else {
      return null;
    }
  }

  set selectedPanel(val: number | null) {
    this.selectedPanelValue = val;
  }

  @Watch("selectedPanelValue")
  changeSelectedPanelValue(val: number | undefined) {
    if (typeof val !== "number") {
      this.syncedSelected = null;
      return;
    }
    const selectedJob = this.syncedJobList[val];
    this.syncedSelected = selectedJob;
  }

  // Attachment排列方式
  arrangement = "brief";
  toggleArrangement() {
    this.arrangement = this.arrangement === "detailed" ? "brief" : "detailed";
  }
  // Edit Job
  openEditJob(job: IJobItem) {
    console.log(job);
  }
  editJob() {
    console.log("edit");
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Jobs/JobsItem.scss";
</style>
